<template>
  <div class="step-content">
    <el-form
      ref="uploadSetForm"
      :model="uploadSetForm"
      :rules="uploadRules"
      label-width="120px"
      class="form-style"
    >
      <el-form-item v-if="sonSteps==1" label="标题名称" prop="titleName">
        <el-input v-model="uploadSetForm.titleName" placeholder="请输入标题" style="width:80%;" />
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="视频">
        <div v-if="uploadSetForm.file">
          <span>{{ uploadSetForm.file }}</span>
          <el-button type="info" size="mini" icon="el-icon-edit" @click="editFile">编辑</el-button>
        </div>
        <div v-if="!uploadSetForm.file">
          <el-tabs type="border-card" style="width:80%;" @tab-click="clickTab">
            <el-tab-pane label="上传资料">
              <uploader
                :options="uploadOptions"
                :autoStart="false"
                :singleFile="true"
                class="uploader-example"
                @file-success="onFileSuccess"
                @file-added="onFileAdded"
                @file-progress="onFileProgress"
                @file-error="onFileError"
              >
                <uploader-unsupport></uploader-unsupport>
                <uploader-drop>
                  <p>拖动文件到此处上传</p>
                  <uploader-btn :single="true">选择文件</uploader-btn>
                  <!-- <uploader-btn :attrs="attrs">选择图片</uploader-btn> -->
                  <!-- <uploader-btn :directory="true">选择文件夹</uploader-btn> -->
                </uploader-drop>
                <uploader-list ref="uploader_list"></uploader-list>
              </uploader>
            </el-tab-pane>
            <el-tab-pane label="从资料库中选择">
              <div>
                <el-row>
                  <el-radio-group v-model="uploadSetForm.source" style="width:300px;">
                    <el-radio label="upload">来自上传</el-radio>
                    <el-radio label="public">公共资料</el-radio>
                    <el-radio label="platform">平台资料</el-radio>
                  </el-radio-group>
                  <div>
                    <el-input v-model="sourceKeyWord" style="width:80%" />
                    <el-button>搜索</el-button>
                  </div>
                </el-row>
              </div>
              <div
                v-infinite-scroll="loading"
                infinite-scroll-disabled="startloading"
                infinite-scroll-distance="50"
                class="loading-box"
              >
                <el-table
                  v-loading="statusloading"
                  :data="sourceTableData"
                  style="width: 100%"
                  @cell-click="tableClick"
                >
                  <el-table-column prop="name" label="文件名" min-width="100%"></el-table-column>
                  <el-table-column prop="size" label="文件大小"></el-table-column>
                  <el-table-column prop="time" label="时间"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="从课程中选择文件">
              <el-autocomplete
                v-model="courseKeyWord"
                :fetch-suggestions="querySearchAsync"
                placeholder="请选择文件"
                style="width:90%;"
                @select="handleSelect"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="视频时长">
        <el-input v-model="uploadSetForm.durationMinute" style="width:30%;">
          <template slot="append">分</template>
        </el-input>
        <el-input v-model="uploadSetForm.durationSecond" style="width:30%">
          <template slot="append">秒</template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="视频字幕" prop="examNum">
        <div>
          <div>请等待视频上传完之后再添加字幕</div>
          <div>
            字幕文件暂时仅支持UTF-8编码的srt文件，点击
            <a
              href="http://www.qiqiuyu.com/faq/386/detail"
              style="color:#4bbbfa"
            >查看</a>编码转换说明。
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="sonSteps==2" label="完成条件">
        <el-select v-model="uploadSetForm.condition">
          <el-option
            v-for="item in conditionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="sonSteps==2 && uploadSetForm.condition=='styleTime'"
        label="至少时长"
        prop="minDuration"
      >
        <el-input v-model="uploadSetForm.minDuration" style="width:200px;">
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="step-btn">
      <el-button v-if="sonSteps==1" type="info" @click="goStep0">上一步</el-button>
      <el-button v-if="sonSteps==1" type="info" @click="goStep2">下一步</el-button>
      <el-button v-if="sonSteps==2" type="info" @click="goStep1">上一步</el-button>
      <el-button v-if="sonSteps==2" type="primary" @click="submitSave">保 存</el-button>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    steps: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      sonSteps: this.steps,
      startloading: true,
      statusloading: false,
      sourceKeyWord: '',
      courseKeyWord: '',
      toLeadKeyWord: '',
      uploadSetForm: {
        titleName: '',
        file: '',
        durationMinute: '',
        durationSecond: '',
        condition: 'styleTime',
        minDuration: '1',
        source: 'upload'
      },
      uploadRules: {
        titleName: [{ required: true, message: '请输入标题', targger: 'blur' }],
        minDuration: [{ required: true, message: '请输入观看时长', targger: 'blur' }]
      },
      conditionOptions: [
        {
          value: 'styleOver',
          label: '学习到最后'
        },
        {
          value: 'styleTime',
          label: '学习时长'
        }
      ],
      sourceTableData: [
        {
          name: 'VID_20190320_095746.mp4',
          size: '20.38M',
          time: '2019/04/30 05:40'
        },
        {
          name: 'VID_20190320_095746.mp4',
          size: '20.38M',
          time: '2019/04/30 05:40'
        },
        {
          name: 'VID_20190320_095746.mp4',
          size: '20.38M',
          time: '2019/04/30 05:40'
        },
        {
          name: 'VID_20190320_095746.mp4',
          size: '20.38M',
          time: '2019/04/30 05:40'
        },
      ],

      uploadOptions: {
        target: 'http://47.104.228.229/apis/api/v1/ss/sys/file/create',
        testChunks: false, // 是否开启服务器分片校验
        chunkSize: '2048000', // 分块大小
        fileParameterName: 'file', // 上传文件时文件的参数名，默认file
        maxChunkRetries: 3, // 最大自动失败重试上传次数
        categaryMap: { //用于限制上传的类型
          image: ["gif", "jpg", "jpeg", "png", "bmp"]
        }
      },
      attrs: {
        accept: 'image'
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    goStep0() {
      this.$emit('nowStep0')
    },
    goStep1() {
      this.sonSteps = 1
      this.$emit('nowStep1')
    },
    goStep2() {
      this.$refs.uploadSetForm.validate((valid) => {
        if (valid) {
          this.sonSteps = 2
          this.$emit('nowStep2')
        } else {
          return false
        }
      })
    },
    submitSave() {
      this.$refs.uploadSetForm.validate((valid) => {
        if (valid) {
          this.$emit('saveInfo')
        } else {
          return false
        }
      })
    },
    editFile() {
      this.uploadSetForm.file = ''
    },
    loadAll() {
      return [
        { "value": "高三数学", "address": "上海市长宁区天山西路" },
        { "value": "语文模拟", "address": "上海市长宁区金钟路968号15楼15-105室" },
      ]
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
      this.uploadSetForm.file = item.value
    },
    clickTab(tab, event) {
      if (tab.label === '从资料库中选择') {
        this.startloading = false
      }
    },
    tableClick(row, column, cell, event) {
      this.uploadSetForm.file = row.name
    },
    loading() {
      if (this.startloading === false) {
        this.startloading = true
        this.statusloading = true
        this.sourceTableData.push(
          {
            name: 'VID_20190320_095746.mp4',
            size: '18.20M',
            time: '2019-06-03 15:30'
          }
        )
        setTimeout(() => {
          this.statusloading = false
        }, 1000)
        this.startloading = false
      }
    },
    onFileAdded(rootFile) {
      // console.log(rootFile)
    },
    onFileProgress(rootFile, file, response) {
    },
    onFileError(rootFile, file, response, chunk) {
      // console.log(rootFile, file, response, chunk)
    },
    onFileSuccess: function (rootFile, file, response, chunk) {
      //这里可以根据response（接口）返回的数据处理自己的实际问题（如：从response拿到后台返回的想要的数据进行组装并显示）
      //注，这里从文件夹每上传成功一个文件会调用一次这个方法
    }
  }
}
</script>
<style lang="scss" scoped>
.step-content {
  min-height: 50px;
  .form-style {
    min-height: 80px;
    border-bottom: 1px solid #eee;
    margin-top: 20px;
    padding: 0 20px;
  }
  .step-btn {
    margin-top: 20px;
    text-align: right;
  }
  .info-hint {
    color: #a1a1a1;
  }
  .loading-box {
    margin-top: 10px;
    max-height: 200px;
    overflow: auto;
  }
  div {
    /deep/.el-tabs--border-card {
      box-shadow: none;
      .el-tabs {
        border-radius: 2px;
      }
      .el-tabs__header {
        margin: 0;
      }
    }
  }
  .uploader-example {
    width: 100%;
    padding: 15px;
    margin: 0px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    .uploader-drop {
      text-align: center;
    }
    .uploader-btn {
      margin-right: 4px;
    }
    .uploader-list {
      max-height: 440px;
      overflow: auto;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
